<template>
	<view>
		<u-cell-group>
			<u-cell :title="item.time" v-for="(item,index) in list" :key="index">
				<view slot="value" style="text-align: right;" :style="item.status==1?'color:blue':(item.status==2?'color:red':'')">
					{{item.content}}
				</view>
			</u-cell>
		</u-cell-group>
		
		<view class="btn-fixed btn-blue" @click="init">刷新</view>
		<view class="btn-fixed" @click="clearLog">清空</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				uni.showLoading()
				let list = uni.getStorageSync('socketLog');
				this.list = list ? JSON.parse(list) : [];
				uni.hideLoading()
				uni.pageScrollTo({ scrollTop: 0, duration: 10 })
			},
			clearLog(){
				var that = this
				uni.showModal({
					title: "提示",
					content: "确定清空日志吗？",
					success(e) {
						if(e.confirm){
							uni.setStorageSync('socketLog', "")
							that.init()
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	/deep/.u-cell__title-text{
		width: 280rpx;
		min-width: 280rpx;
		text-align: left;
	}
	
	.btn-fixed{
		position: fixed;
		right: 0;
		bottom: 180rpx;
		border-radius: 50%;
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #D81E06;
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		
		&.btn-blue{
			bottom: 260rpx;
			background-color: #12b3f1;
		}
	}
</style>
